<!--
 * @Author: 明月下
 * @Date: 2022-08-05 19:56:11
 * @LastEditors: 明月下
 * @LastEditTime: 2023-03-08 22:52:57
 * @FilePath: \ali-yun-slimming\vue3-vite\src\components\HeaderInput.vue
 * @Description:
-->
<template>
<div class="input">
    <van-row>
        <van-col span="24"><span>{{ today }} {{ day }}</span></van-col>
    </van-row>
    <br>
    <van-row>
        <van-col span="8">
          <van-dropdown-menu>
            <van-dropdown-item v-model="name" :options="option1" />
          </van-dropdown-menu>
        </van-col>
        <van-col span="10"><input v-model="number" type="number" placeholder="请输入体重" /></van-col>
        <van-col span="6"><van-button round :loading="loading" type="success" @click="add()">提交</van-button></van-col>
    </van-row>
</div>
</template>

<script lang="ts">
import { ref, inject, defineComponent } from 'vue'
import { Toast } from 'vant';
import { addByName } from '../api/mongodb'

export default defineComponent ({
    setup() {

          const date: Date = new Date()
          const dayList: string[] = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
          const day: string = dayList[date.getDay()]
          const today: string = date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2,'0') + '-' + date.getDate().toString().padStart(2,'0')
          let number = ref()
          let loading: boolean = false
          const name= ref()
          const option1 = [
              { text: '源二狗', value: '张源' },
              { text: '任粽粽', value: '任露' },
              { text: '大老飞', value: '乜飞' },
              { text: '大猫猫', value: '张莹方' },
              { text: '大肉肉', value: '张月' },
            ]
          const reload = inject<Function>('reload')
          const add = () => {
            if (name.value && number.value > 0){
              addByName({name:name.value,weight:number.value.toString(),date:today}).then( data => {
                console.log(data)
                reload && reload()
                Toast.success('打卡成功！今天也是棒棒的你哦！')
              })
            }else if (!name.value){
              Toast.fail('请选择姓名');
            }else {
              Toast.fail('请输入体重');
            }
          }
          return {
            reload,
            today,
            day,
            name,
            option1,
            number,
            loading,
            add
          }
    }
})
</script>

<style scoped>
.van-col {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
input {
  width: 100%;
  height: 100%;
  border: none;
  border-bottom: 1px solid #4fc08d;
}
.van-dropdown-menu {
  width: 80%;
  border-radius: 20px;
}
</style>
